<template>
    <ul class="taskMinList">
        <li v-for="dt in list" :key="dt.plantingPlanTaskRecordId">
            <a :class="{'selected':dt.plantingPlanTaskRecordId==curId}" @click="lookDetail(dt)">
                <div class="imgBox" :style="`background-image: url(${dt.avatarUrl || './images/default-avatar.png'});`"></div>
                <div class="content">
                    <div class="conitem">
                        <div class="lb name">{{dt.createName}}</div>
                        <div class="time">{{dt.createTime}}</div>
                    </div>
                    <div class="conitem">
                        <div class="lb stage">
                            <template v-if="type==2" >
                                <div class="zsqk" 
                                :style="`color: ${dt.growthColor};border:1px solid ${dt.growthColor};`">
                                {{dt.growthName}}
                               </div>
                            </template>
                            <template v-else>
                                {{dt.farmingName}}
                            </template>
                        </div>   
                        <div class="status" style="color:#04AE70">
                            <template v-if="dt.taskStatus=='YWC'">{{dt.taskStatusMeaning}}</template>
                            <template v-else>
                                <p style="color: #7F7F7F;">累计处理 <span style="color: #3A92FF;">{{ dt.currentHandleCount }}</span> 次</p>
                            </template>
                        </div>
                        <div class="iocnbtn"><el-icon color="#04AE70"><ArrowRight /></el-icon></div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { useRouter } from "vue-router"
const router = useRouter()
const emit = defineEmits(['itemClick'])
const props = defineProps({
    list:{
        type:Object,
        default:()=>{}
    },
    type:{
        type:Number,
        default:1 
    }
})

const curId = ref('')

onMounted(() =>{
    const { currentRoute } = router
    const plantingPlanTaskRecordId = currentRoute.value.query.plantingPlanTaskRecordId
    if(plantingPlanTaskRecordId){
        curId.value = plantingPlanTaskRecordId
    }
})

const lookDetail = (item)=>{
    curId.value = item.plantingPlanTaskRecordId
    emit('itemClick',item)
}
</script>

<style scoped lang="scss">
.taskMinList{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    li{
        a{
            display: flex;
            position: relative;
            z-index: 10;
            box-sizing: border-box;
            padding:11px 10px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            color: #333333;
            &:hover{
                background-color: #EBF9F4;
                cursor: pointer;
            }
            &.selected{
                background-color: #EBF9F4; 
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 4px;
                    height: 100%;
                    background-color: #04AE70;
                }
            }
            .imgBox{
                height: 46px;
                width: 46px;
                background-color: #eee;
                border-radius: 50%;
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: left top;
                flex-shrink: 0;
            }
            .content{
                flex: 1;
                box-sizing: border-box;
                flex-shrink: 0;
                padding: 0 0 0 6px;
                .conitem{
                    display: flex;
                    height: 22px;
                    line-height: 22px;
                    .lb{
                        flex: 1;
                    }
                    .name{
                        font-weight: 800;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    .stage{
                        display: flex;
                        align-items: center;
                        font-weight: 400;
                        color: #999999; 
                        flex-shrink: 0;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    .time{
                        font-size: 12px;
                        font-weight: 400;
                        color: #999999;
                    }
                    .status{
                        font-weight: 400;
                        font-size: 12px;
                        flex-shrink: 0;
                        p{
                            font-size: 12px;
                            color: #3A3A3A;
                            span{
                                color: #6BADFF;
                                font-weight: 600;
                            }
                        }
                    }
                    .iocnbtn{
                        display: flex;
                        align-items: center;
                        flex-shrink: 0;
                    }
                    .zsqk{
                        padding: 0 3px;
                        margin: 0 0 0 2px;
                        border: 1px solid #999;
                        height: 20px;
                        line-height: 18px;
                        padding: 0 7px;
                        min-width: 40px;
                        text-align: center;
                        border-radius: 10px;
                        box-sizing: border-box;
                        white-space: nowrap;
                        font-size: 12px;
                        &.EXUBERANT{
                            background: #d1992520;
                            border: 1px solid #d19925;
                        }
                        &.ROBUST{
                            background: #E6F6F0;
                            border: 1px solid #A7E2CC;
                        }
                        &.MEDIUM{
                            background: #F1F8F5;
                            border: 1px solid #C9E6D6;
                        }
                        &.BAD{
                            background: #FEEFEF;
                            border: 1px solid #FBBEBE; 
                        }
                    }
                }
            }
        }  
    }
}
</style>